<template>
	<view class="space">
		<!-- #ifndef MP-TOUTIAO -->
		<view class="fixedTop">
			<u-status-bar></u-status-bar>
			<view style="height: 88rpx;display: flex;align-items: center;">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon6.png" mode="scaleToFill"
					@click="navigateBack()" style="background-color: #fff;border-radius: 50%;"></image>
			</view>
		</view>
		<!-- #endif -->
		<view class="top-user">
			<view class="back-img">
				<image
					:src="userData.back_img || `https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/spaceBack.png`"
					mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="avatar">
					<image :src="userData.avatar" mode="scaleToFill"></image>
				</view>
				<view class="name">
					<view class="nameDad">
						<view class="nickname">
							{{ userData.nickname }}
							<text v-if="userData.notes">({{userData.notes}})</text>
						</view>
						<view class="hua">
							<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/hua.png"
								mode="scaleToFill"></image>
							总鲜花数<text style="margin-left: 4rpx;">{{userData.get_flower}}</text>
						</view>
					</view>
					<!-- #ifdef H5 -->
					<image class="bz" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Editor.png"
						mode="scaleToFill" @click="notesPopShow = true"></image>
					<image class="fx" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon18.png"
						mode="scaleToFill" @click="share"></image>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<button class="btn" @click="notesPopShow = true">
						<image class="bz" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Editor.png"
							mode="scaleToFill"></image>
					</button>
					<button class="btn" open-type="share">
						<image class="fx" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon18.png"
							mode="scaleToFill"></image>
					</button>
					<!-- #endif -->
				</view>
				<view class="yins">
					<view v-if="userData.age || userData.gender" class="item">
						<u-icon v-if="userData.gender == 1" name="man" color="#377dff" size="14" bold></u-icon>
						<u-icon v-if="userData.gender == 2" name="woman" color="#ff52e8" size="14" bold></u-icon>
						<text>{{ userData.age }}岁</text>
						<!-- <text>{{userData.age}}</text> -->
					</view>
					<view v-if="userData.province" class="item">
						{{ userData.province }}·{{ userData.city }}
						<!-- {{userData.province +"·"+ userData.city}}-->
					</view>
					<view class="item" @click="copyll">ID：{{ userData.id }}
						<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Copy.png"
							mode="scaleToFill"></image>
					</view>
					<!-- <view class="item">
						<image style="margin: 0 4rpx 0 0;" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/gift/flowerB.png"
							mode="scaleToFill"></image>
						99
					</view> -->
					<!-- <view class="item" style="padding: 0 18rpx">
						设置备注
					</view> -->
				</view>
				<view class="desc">
					<!-- 📸 记录美好，用镜头捕捉生活的美好瞬间 🍽️ 美食探店，从街头小吃到高端餐厅，为你带来最真实的试吃报告 -->
					{{ userData.desc || "📸 记录美好生活🌹🌹🌹"}}
				</view>

				<view class="myData">
					<view class="item">
						<view class="value">{{userData.follow_num | million}}</view>
						<view class="key">关注</view>
					</view>
					<view class="item">
						<view class="value">{{userData.fans | million}}</view>
						<view class="key">粉丝</view>
					</view>
					<view class="item">
						<view class="value">{{userData.browse_num_count | million}}</view>
						<view class="key">浏览</view>
					</view>
					<view class="item">
						<view class="value">{{userData.work_num | million}}</view>
						<view class="key">作品</view>
					</view>
				</view>

				<view v-if="userData.is_me == 0" class="bottomBor">
					<view class="btn" :class="{xz: userData.subscribe_data}" style="margin-right: 14rpx;"
						@click="showPopup">
						{{ userData.subscribe_data ? `到期时间 ：${userData.subscribe_data.end_time}` : `订阅` }}
					</view>
					<view :class="['btn', userData.is_favorite == 1 ? 'xz' : '']" @click="doFavorite">
						{{ userData.is_favorite == 1 ? "已关注" : "关注" }}
					</view>
					<view class="private" @click="goMsg">
						<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Message-unread.png"
							mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view v-if="workList.length" class="space-list">
			<view class="item" v-for="(v, i) in workList" :key="i" @click="goTo(v)">
				<view class="date">
					<view class="sun">{{ v.created_at.substring(8, 10) }}</view>
					<view class="yearMonth">{{ v.created_at.substring(2, 7) }}</view>
				</view>
				<view class="right">
					<view class="title">
						{{ v.title }}
					</view>
					<view class="cover">
						<image :src="v.image" mode="aspectFill"></image>
						<view v-if="v.is_unlock == 0" class="mask">
							未解锁
						</view>
					</view>
					<view class="time">
						{{ v.created_at.substring(11, 16) }}
					</view>
				</view>
			</view>
		</view>
		<nullPage v-else :fixed="false"></nullPage>

		<u-popup :show="popShow" mode="center" bgColor="transparent" @close="popShow = false">
			<view class="subscribe">
				<view class="title">订阅</view>
				<view class="desc">{{userData.subscribe_desc || "开启订阅可畅享创作者内容"}}</view>
				<view class="btn" @click="pay">
					￥{{ userData.subscribe_price }}/月开启订阅
				</view>
			</view>
		</u-popup>

		<u-popup :show="notesPopShow" mode="center" bgColor="transparent" @close="notesPopShow = false">
			<view class="notes">
				<textarea class="textarea" placeholder="请填写你的备注信息~" :maxlength="50" v-model.trim="notes"
					style="height: 200rpx;" />
				<view class="btn" @click="saveNotes">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import nullPage from "@/components/nullPage.vue"
	export default {
		components: {
			nullPage
		},
		data() {
			return {
				user_id: "",
				page: 1,
				userData: {},
				workList: [],
				popShow: false,
				notesPopShow: false,
				notes: ""
			}
		},
		onLoad(options) {
			if (options.referee_id) {
				uni.setStorageSync("referee_id", options.referee_id)
			}
			// console.log(options);
			this.user_id = options.id
			this.getAuthorInfo()
			this.getAuthorWork()
		},
		methods: {
			async goMsg() {
				// 发起会话
				let res = await this.$http("api/message/sendchat", {
					another_id: this.user_id
				})
				if (res.code == 200) {
					this.$store.state.message_id = res.result.message_id
					this.navigateTo(
						`/pages/index/privateMessage?uid=${this.user_id}`)
				}
			},
			// 添加/修改备注
			async saveNotes() {
				let res = await this.$http("api/user/saveNotes", {
					other_user_id: this.user_id, //true	int		需要增加备注的用户
					notes: this.notes, //true	string		备注
				})
				if (res.code == 200) {
					this.notesPopShow = false
					uni.showToast({
						title: '备注成功',
						icon: 'none',
					})
					this.getAuthorInfo()
				}
			},
			// 前往详情页面
			async goTo(data) {
				// console.log(data);
				let res = await this.$http("api/work/getWorkInfo", {
					id: data.id
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					if (res.result.is_unlock) {
						this.navigateTo(`/pages/index/content?id=${res.result.id}`)
					} else {
						this.navigateTo(`/pages/index/unlock?id=${res.result.id}`)
					}
				}
			},
			showPopup() { // 弹出订阅弹框
				console.log(getApp().globalData.platform);
				if (getApp().globalData.platform != `web`) {
					uni.showToast({
						title: '暂不支持',
						duration: 2000,
						icon: "none"
					})
					return;
				}
				if (this.userData.subscribe_data) return;
				this.popShow = true;
			},
			share() {
				if (getApp().globalData.platform == `web`) {
					// console.log(window.location);
					let userInfo = uni.getStorageSync("user");
					uni.setClipboardData({
						data: `${window.location.href}&referee_id=${userInfo.id}`,
						showToast: false,
						success: () => {
							uni.showToast({
								title: '已复制邀请链接，可发送至邀请人加入',
								duration: 2000
							})
						},
						fail: (err) => {
							console.log(err);
						}
					});
				}
			},
			async pay() { // 支付
				let res = await this.$http("api/order/createSubscribeOrder", {
					subscribe_user_id: this.user_id
				})
				console.log("结果：", res);
				if (res.code == 200) {
					let orderInfo = await this.$http("api/order/paySubscribeOrder", {
						order_sn: res.result.order_sn,
						pay_type: 2,
						return_url: `${window.location.origin}${window.location.pathname}#/pages/index/space?id=${this.user_id}`
					})
					console.log("订单结果：", orderInfo);

					const div = document.createElement('formdiv');
					div.innerHTML = orderInfo.result.html;
					document.body.appendChild(div);
					//document.forms[0].setAttribute('target', ' self');
					document.forms[0].submit();
					div.remove();
				}
			},
			//关注/取消关注
			async doFavorite() {
				this.userData.is_favorite = this.userData.is_favorite == 1 ? 0 : 1
				let res = await this.$http("api/common/doFavorite", {
					type: 2, //true	int		1作品2用户
					work_type: 0, //false	int		默认可以传0,type等于1需要传,作品操作类型 1收藏 2点赞
					tbl_id: this.user_id, //true	int		作品id或用户id 取消收藏多个id用,拼接
				})
				this.getAuthorInfo()
			},
			// 复制id
			copyll() {
				uni.setClipboardData({
					data: this.user_id,
					success: () => {

					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			//查看他人信息
			async getAuthorInfo() {
				let res = await this.$http("api/work/getAuthorInfo", {
					user_id: this.user_id
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					if (res.result.subscribe_data) res.result.subscribe_data.end_time = res.result.subscribe_data
						.end_time.split(" ")[0];
					this.notes = res.result.notes
					this.userData = res.result;
				}
			},
			//他人笔记列表
			async getAuthorWork() {
				let res = await this.$http("api/work/getAuthorWork", {
					user_id: this.user_id,
					page: this.page,
					size: 10,
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					this.workList = this.workList.concat(res.result.data)
					this.total = res.result.total
				}
			}
		},
		onReachBottom() {
			if (this.workList.length >= this.total) return
			this.page += 1
			this.getAuthorWork()
		}
	}
</script>

<style scoped lang="scss">
	.space {
		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-left: 32rpx;
			}
		}

		.top-user {
			.back-img {
				image {
					display: block;
					width: 100%;
					height: 540rpx;
				}
			}

			.info {
				position: relative;
				// height: 376rpx;
				background: #FFFFFF;
				border-radius: 36rpx 36rpx 0rpx 0rpx;
				margin-top: -140rpx;
				padding: 0 32rpx 32rpx;

				.avatar {
					position: absolute;
					top: -80rpx;
					border: 6rpx solid #fff;
					border-radius: 50%;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
					}
				}

				.name {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0 20rpx 172rpx;
					padding-left: 172rpx;
					box-sizing: border-box;

					.nameDad {
						display: flex;
						align-items: center;
						flex: 1;
						flex-wrap: wrap;

						.nickname {
							font-weight: 800;
							font-size: 32rpx;
							color: #333333;
							letter-spacing: 2rpx;
							margin-right: 16rpx;
						}

						.hua {
							display: flex;
							align-items: center;
							padding: 0 12rpx;
							height: 36rpx;
							background: #FF504A;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-weight: bold;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 1;

							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 8rpx;
							}
						}
					}

					.fx,
					.bz {
						width: 36rpx;
						height: 36rpx;
						margin: 6rpx 0 0 12rpx;
					}

					::v-deep button {
						background: none;
						padding: 0;
						text-align: left;
						margin: 0;
					}

					::v-deep button::after {
						content: none;
					}
				}

				.yins {
					display: flex;
					align-items: center;
					padding-top: 24rpx;

					.item {
						display: flex;
						align-items: center;
						// width: 114rpx;
						height: 32rpx;
						padding: 0 12rpx;
						background: #F6F6F4;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-weight: bold;
						font-size: 20rpx;
						color: #333333;
						margin-right: 12rpx;

						image {
							display: block;
							width: 24rpx;
							height: 24rpx;
							margin-left: 4rpx;
						}
					}
				}

				.desc {
					padding-top: 24rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					line-height: 36rpx;
				}

				.myData {
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding-top: 30rpx;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						flex: 1;

						.value {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.key {
							padding-top: 8rpx;
							font-weight: 500;
							font-size: 20rpx;
							color: #8D8F90;
						}
					}
				}

				.bottomBor {
					display: flex;
					align-items: center;
					margin-top: 24rpx;

					.btn {
						width: 296rpx;
						// width: 378rpx;
						height: 80rpx;
						background: #333333;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						line-height: 80rpx;
						text-align: center;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.xz {
						background: #F6F6F4;
						color: #333333;
					}

					.private {
						margin-left: 32rpx;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
			}
		}

		.space-list {
			padding: 16rpx 32rpx 100rpx;
			background-color: #FFFFFF;
			border-top: 24rpx solid #F3F3F3;

			.item {
				display: flex;
				padding: 16rpx 0;

				.date {
					padding-right: 24rpx;

					.sun {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}

					.yearMonth {
						font-weight: bold;
						font-size: 24rpx;
						color: #8D8F90;
						padding-top: 8rpx;
					}
				}

				.right {
					flex: 1;

					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						letter-spacing: 2rpx;
						line-height: 42rpx;
					}

					.cover {
						position: relative;
						border-radius: 16rpx;
						margin: 16rpx 0;

						image {
							display: block;
							width: 100%;
							height: 440rpx;
							border-radius: 16rpx;
						}

						.mask {
							position: absolute;
							/* 绝对定位或固定定位，根据需求 */
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background-color: rgba(0, 0, 0, 0.5);
							z-index: 9;
							border-radius: 16rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: bold;
							font-size: 32rpx;
							color: #FFFFFF;
						}
					}

					.time {
						font-weight: bold;
						font-size: 24rpx;
						color: #8D8F90;
					}
				}
			}
		}

		.subscribe {
			width: 546rpx;
			height: 646rpx;
			background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/subscribeBack.png") no-repeat;
			background-size: 100% 100%;
			padding: 286rpx 40rpx 0;
			box-sizing: border-box;

			.title {
				text-align: center;
				font-weight: 800;
				font-size: 48rpx;
				color: #333333;
			}

			.desc {
				padding: 32rpx 0;
				font-weight: 500;
				font-size: 28rpx;
				color: #8D8F90;
				text-align: center;
			}

			.btn {
				width: 408rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #FF1881 0%, #FF2F1A 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: auto;
				line-height: 80rpx;
				text-align: center;
				font-weight: 800;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.notes {
			width: 628rpx;
			height: 588rpx;
			background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/notesPop.png") no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 166rpx 48rpx 0;
			position: relative;

			.textarea {
				width: 532rpx;
				height: 200rpx;
				box-sizing: border-box;
				padding: 20rpx;
				font-weight: 500;
				font-size: 24rpx;
				letter-spacing: 2rpx;

				.uni-textarea-placeholder {
					font-weight: 500;
					font-size: 24rpx;
					color: #8D8F90;
				}
			}

			.btn {
				position: absolute;
				bottom: 32rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 540rpx;
				height: 96rpx;
				line-height: 96rpx;
				background: #D1FF23;
				border-radius: 102rpx 102rpx 102rpx 102rpx;
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
</style>